<template>
  <div class="out_box">
      <div class="searbar" :class="{'dynamicStyle': active}"  @mouseover="mouseOver()" @mouseleave="mouseLeave()">
          <input type="text" class="bar" v-model="searchtext" placeholder="请输入您想要搜索的图书">
          <i class="el-icon-search sicon"  @click="doSearch()"></i>  
      </div>
      <div class="mycar"><router-link to="/car"><el-button type="danger" icon="el-icon-shopping-cart-2" plain>我的购物车</el-button></router-link></div>
       
  </div>
</template>

<script>
import {globalBus} from '../eventbus/globalBus'
export default {
  
    components :{
  },
  name: 'SearchBar',
  props: {
    msg: String
  },
  data(){
      return{
           searchtext:'',
           active:''
      }
  },
  methods:{
      doSearch()
      {
         //创建事件实例
        globalBus.$emit("keyword",this.searchtext)
        },
      mouseOver(){ 
        this.active = true
        },
      mouseLeave(){
        this.active = false;
         }
  }
}
</script>


<style  scoped>
.out_box
{
    display: flex;
    margin: 0 auto;
    margin-top: 30px;
    width: 1340px;
    height: 100px;
}
.searbar
{
  margin-top: 50px;
  border: 1px gray solid;
  border-radius: 15px; 
  color:grey;
  width: 250px;
  height: 30px;
  opacity: 0.7;
  margin-left: 30%;
}
.mycar
{
  margin-top: 45px;
  padding-left: 20px;
}
.bar
{

 background:none; 
 outline:none; 
 border:none;
 height: 30px;
 
}
.sicon
{
  cursor: pointer;
}
.dynamicStyle
{
 box-shadow: 0 0 3px orange;
 opacity: 1;
}
</style>
